<template>
  <div class="rights-container white-bg-page">
    <div class="header">此功能需要购买{{packages.name}}才可使用</div>
    <div class="rights-title fz16">购买{{packages.name}}，享有以下{{packages.rights&&packages.rights.length}}项专属权益</div>
    <EquityList :data="packages.cat_list"/>
    <div class="footer-btn">
      <el-button class="btn-w150 btn-h36 has-radius"
        type="success"
        @click="goPurchase">购买权益包</el-button>
    </div>
  </div>
</template>

<script>
import mixins from './mixins'
import { getCidByPkg } from '@/utils/costum'
export default {
  name: 'RightsV2',
  mixins: [mixins],
  data () {
    return {
      packages: {}
    }
  },
  created () {
    this.getPackages()
  },
  methods: {
    onLoadFinish () {
      const h = Math.max(360, this.pkgH + 300)
      this.$xz('xz_set_window_size', 'XZDesktopVIP', 656, h)
      this.$xz('xz_page_load_finished', 'XZDesktopVIP')
    },
    goPurchase () {
      if (this.appInfo.appID === '22') {
        const cid = getCidByPkg(this.packages.pkg_id)
        this.$xz('xz_switch_dialog', 'XZDesktopOrderVIP', true, JSON.stringify({ cid, pkgid: this.packages.pkg_id }))
      } else {
        this.$xz('xz_switch_dialog', 'XZDesktopVIP', false)
        this.$xz('xz_switch_dialog', 'XZMainWindow', true)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.rights-container {
  height: 100%;
  overflow: auto;
  padding: 20px 25px 10px;
}
.header {
  margin-bottom: 10px;
  text-align: center;
}
.footer-btn{
  margin-top: 20px;
  text-align: center;
}
</style>
